<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Plus, Search, InfoFilled, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from 'vue-router'
import { userApi } from '@/api/request'
import { useUserStore } from '@/stores/useUserStore'

// ===== 常量定义 =====
const DEFAULT_PAGE_SIZE = 10
const PAGE_SIZES = [10, 20, 50, 100]

// 角色名称映射
const ROLE_NAME_MAP = {
  user: '普通用户',
  admin: '管理员'
}

// ===== 状态管理 =====
const router = useRouter()
const userStore = useUserStore()

// 用户列表相关状态
const users = ref([])
const search = ref('')
const errorMessage = ref('')

// 加载状态
const tableLoading = ref(false)
const submitLoading = ref(false)
const deleteLoading = ref({})
const switchLoading = ref({})

// 分页状态
const currentPage = ref(1)
const pageSize = ref(DEFAULT_PAGE_SIZE)
const total = ref(0)

// 表单状态
const showUserForm = ref(false)
const isEditing = ref(false)
const userFormRef = ref(null)
const userForm = ref({
  username: '',
  password: '',
  roleId: '1',
  status: 'active'
})

// 角色列表
const roleList = ref([])

// ===== 表单验证规则 =====
const userFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 2,
      max: 20,
      message: '用户名长度必须在2到20个字符之间',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9_]+$/,
      message: '用户名只能包含字母、数字和下划线',
      trigger: 'blur'
    }
  ],
  passward: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 6,
      max: 20,
      message: '密码长度必须在6到20个字符之间',
      trigger: 'blur'
    }
  ],
  roleId: [{ required: true, message: '请选择用户角色', trigger: 'change' }]
}

// 动态生成表单验证规则，编辑模式下密码不是必填项
const getFormRules = (isEdit) => {
  const rules = { ...userFormRules }

  if (isEdit) {
    // 编辑模式下移除密码必填验证
    rules.passward = [
      {
        min: 6,
        max: 20,
        message: '密码长度必须在6到20个字符之间',
        trigger: 'blur'
      }
    ]
  }

  return rules
}

// ===== 权限验证 =====
// 检查登录状态
const checkAuth = () => {
  // 检查 store 中的登录状态和管理员权限
  if (!userStore.isLoggedIn || !userStore.token) {
    ElMessage.error('请先登录')
    router.replace('/login')
    return false
  }

  // 检查是否是管理员
  const isAdmin =
    localStorage.getItem('admin-role') === 'admin' &&
    localStorage.getItem('admin-token') === userStore.token

  if (!isAdmin) {
    ElMessage.error('需要管理员权限')
    router.replace('/home')
    return false
  }

  return true
}

// 路由进入守卫
const beforeRouteEnter = async (to, from, next) => {
  const adminToken = localStorage.getItem('admin-token')
  const isAdmin = localStorage.getItem('admin-role') === 'admin'

  if (adminToken && isAdmin) {
    next()
  } else {
    ElMessage.error('请先登录管理员账号')
    next('/login')
  }
}

// ===== 工具函数 =====
// 保存用户状态到本地存储
const saveUsersState = () => {
  const usersState = users.value.map((user) => ({
    id: user.id,
    username: user.username,
    status: user.status
  }))
  localStorage.setItem('users-state', JSON.stringify(usersState))
}

// 从本地存储恢复用户状态
const restoreUsersState = (currentUsers) => {
  try {
    const savedState = localStorage.getItem('users-state')
    if (savedState) {
      const usersState = JSON.parse(savedState)
      return currentUsers.map((user) => {
        const savedUser = usersState.find((saved) => saved.id === user.id)
        return savedUser ? { ...user, status: savedUser.status } : user
      })
    }
  } catch (error) {
    console.error('恢复用户状态失败:', error)
  }
  return currentUsers
}

// 在组件卸载时清理
onUnmounted(() => {
  // 清除错误消息
  errorMessage.value = ''
  // 保存最后的用户状态
  saveUsersState()
})

// ===== 用户管理方法 =====
// 获取用户列表
const fetchUsers = async (showLoading = true) => {
  if (!checkAuth()) return

  if (showLoading) {
    tableLoading.value = true
  }

  try {
    const response = await userApi.getUsers({
      username: search.value,
      role: '',
      page: currentPage.value,
      pageSize: pageSize.value
    })

    if (response.data.code === 200) {
      users.value = restoreUsersState(response.data.data.list)
      total.value = response.data.data.total
    } else {
      throw new Error(response.data.message || '获取用户列表失败')
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    if (error.response?.status === 401) {
      ElMessage.error('登录已过期，请重新登录')
      userStore.logout()
      router.push('/login')
    } else {
      ElMessage.error(error.message || '获取用户列表失败，请稍后重试')
    }
  } finally {
    if (showLoading) {
      tableLoading.value = false
    }
  }
}

// 获取角色列表
const fetchRoles = async () => {
  try {
    const response = await userApi.getRoles()
    if (response.data.code === 200) {
      console.log('获取到的角色列表:', response.data.data)

      // 存储原始角色列表
      roleList.value = response.data.data.map((role) => ({
        ...role,
        // 添加用户友好的显示名称
        displayName: ROLE_NAME_MAP[role.name] || role.name
      }))
    } else {
      ElMessage.error(response.data.message || '获取角色列表失败')
    }
  } catch (error) {
    console.error('获取角色列表失败:', error)
    ElMessage.error('获取角色列表失败，请稍后重试')
  }
}

// ===== 表单操作 =====
// 打开添加用户表单
const showAddUserForm = () => {
  isEditing.value = false
  userForm.value = {
    username: '',
    passward: '',
    roleId: roleList.value.length > 0 ? roleList.value[0].id.toString() : '1',
    status: 'active'
  }
  showUserForm.value = true
}

// 打开编辑用户表单
const showEditUserForm = (user) => {
  isEditing.value = true

  // 根据用户当前角色查找对应的角色ID
  let roleId = '1'
  if (user.roleName) {
    // 查找匹配的角色ID
    const role = roleList.value.find((role) => role.name === user.roleName)
    if (role) {
      roleId = role.id.toString()
    }
  }

  userForm.value = {
    id: user.id,
    username: user.username,
    roleId: roleId
  }
  showUserForm.value = true
}

// 提交用户表单
const submitUserForm = async () => {
  if (!userFormRef.value) return

  try {
    await userFormRef.value.validate()
    submitLoading.value = true

    if (isEditing.value) {
      // 编辑模式，只更新角色
      console.log('更新用户角色，参数:', {
        id: userForm.value.id,
        roleId: userForm.value.roleId
      })

      const response = await userApi.updateUserRole({
        id: userForm.value.id,
        roleId: userForm.value.roleId
      })

      if (response.data.code === 200) {
        ElMessage.success('编辑用户成功')
        showUserForm.value = false
        await fetchUsers(false)
      } else {
        throw new Error(response.data.message || '编辑用户失败')
      }
    } else {
      // 添加模式
      console.log('添加用户，参数:', userForm.value)

      const response = await userApi.createUser({
        username: userForm.value.username,
        passward: userForm.value.passward, // 确保密码字段正确
        roleId: userForm.value.roleId
      })

      if (response.data.code === 200) {
        ElMessage.success('添加用户成功')
        showUserForm.value = false
        await fetchUsers(false)
      } else {
        throw new Error(response.data.message || '添加用户失败')
      }
    }
  } catch (error) {
    if (error.message) {
      ElMessage.error(error.message)
    } else {
      console.error('操作失败:', error)
      ElMessage.error('操作失败，请稍后重试')
    }
  } finally {
    submitLoading.value = false
  }
}

// ===== 用户操作 =====
// 删除用户
const deleteUser = async (user) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户 ${user.username} 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    deleteLoading.value[user.username] = true
    const response = await userApi.deleteUser({ id: user.id })

    if (response.data.code === 200) {
      ElMessage.success('删除用户成功')
      // 如果是最后一页且只有一条数据，删除后自动跳转到上一页
      if (currentPage.value > 1 && users.value.length === 1) {
        currentPage.value--
      }
      await fetchUsers(false)
    } else {
      throw new Error(response.data.message || '删除用户失败')
    }
  } catch (error) {
    if (error === 'cancel') return
    console.error('删除用户失败:', error)
    ElMessage.error(error.message || '删除用户失败，请稍后重试')
  } finally {
    deleteLoading.value[user.username] = false
  }
}

// 状态转换函数
const convertStatus = {
  toNumber: (status) => (status === 'active' ? 0 : 1),
  toString: (status) => (status === 0 ? 'active' : 'disabled')
}

// 处理状态改变
const handleStatusChange = async (user, newStatus) => {
  const numericStatus = convertStatus.toNumber(newStatus)
  if (user.status === numericStatus) return

  try {
    const action = numericStatus === 0 ? '启用' : '禁用'
    const username = user.username
    const userType = user.roleName === 'admin' ? '管理员' : '普通用户'

    await ElMessageBox.confirm(
      `确定要${action}${userType}「${username}」吗？`,
      '状态修改确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'status-change-dialog'
      }
    )

    switchLoading.value[user.username] = true
    const response = await userApi.updateUserStatus({
      username: user.username,
      role: user.roleName,
      status: numericStatus
    })

    if (response.data.code === 200) {
      user.status = numericStatus
      saveUsersState()

      ElMessage({
        type: 'success',
        message: `${userType}「${username}」已${action}成功`,
        duration: 3000,
        showClose: true,
        grouping: true
      })

      // 添加视觉反馈
      const row = document.querySelector(`[data-username="${username}"]`)
      if (row) {
        row.classList.add('status-changed')
        setTimeout(() => row.classList.remove('status-changed'), 1000)
      }
    } else {
      user.status = numericStatus === 0 ? 1 : 0
      throw new Error(response.data.message || `${action}用户失败`)
    }
  } catch (error) {
    if (error === 'cancel') {
      user.status = numericStatus === 0 ? 1 : 0
      ElMessage({
        type: 'info',
        message: '已取消状态修改',
        duration: 2000
      })
      return
    }
    console.error('更新用户状态失败:', error)
    ElMessage({
      type: 'error',
      message: error.message || '更新用户状态失败，请稍后重试',
      duration: 4000,
      showClose: true
    })
    user.status = numericStatus === 0 ? 1 : 0
  } finally {
    switchLoading.value[user.username] = false
  }
}

// ===== 分页和搜索 =====
// 处理页码改变
const handlePageChange = (page) => {
  currentPage.value = page
  fetchUsers(true)
}

// 处理每页数量改变
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchUsers(true)
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchUsers(true)
}

// ===== 计算属性 =====
// 过滤用户列表
const filteredUsers = computed(() =>
  users.value.filter(
    (user) =>
      !search.value ||
      user.username.toLowerCase().includes(search.value.toLowerCase()) ||
      user.role.toLowerCase().includes(search.value.toLowerCase())
  )
)

// ===== 路由守卫 =====
defineExpose({
  beforeRouteEnter
})

// ===== 生命周期钩子 =====
onMounted(async () => {
  // 进入页面时检查登录状态
  if (checkAuth()) {
    await fetchRoles() // 先获取角色列表
    await fetchUsers()
  }
})
</script>

<template>
  <div class="user-management-container">
    <div class="page-header">
      <h1>用户管理</h1>
      <div class="header-actions">
        <el-button
          type="primary"
          @click="showAddUserForm"
          :disabled="tableLoading"
          class="add-button"
        >
          <el-icon class="button-icon"><Plus /></el-icon>
          <span>添加用户</span>
        </el-button>
      </div>
    </div>

    <div class="search-bar">
      <el-input
        v-model="search"
        placeholder="搜索用户名"
        clearable
        :prefix-icon="Search"
        @clear="handleSearch"
        @keyup.enter="handleSearch"
        class="search-input"
      >
        <template #append>
          <el-button @click="handleSearch" class="search-button">
            <el-icon><Search /></el-icon>
            <span>搜索</span>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 用户列表 -->
    <el-card class="table-card" shadow="hover">
      <div class="table-wrapper">
        <el-table
          v-loading="tableLoading"
          :data="filteredUsers"
          style="width: 100%"
          row-key="id"
          border
          class="user-table"
        >
          <el-table-column prop="username" label="用户名">
            <template #default="{ row }">
              <span :data-username="row.username">{{ row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="roleName" label="角色">
            <template #default="{ row }">
              <el-tag :type="row.roleName === 'admin' ? 'danger' : 'success'">
                {{ row.roleName === 'admin' ? '管理员' : '普通用户' }}
              </el-tag>
              <el-tooltip
                v-if="row.roleDescription"
                :content="row.roleDescription"
                placement="top"
              >
                <el-icon class="info-icon"><InfoFilled /></el-icon>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-switch
                :model-value="convertStatus.toString(row.status)"
                :active-value="'active'"
                :inactive-value="'disabled'"
                :loading="switchLoading[row.username]"
                @change="(val) => handleStatusChange(row, val)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="right" fixed="right">
            <template #default="{ row }">
              <div class="operation-buttons">
                <el-button
                  type="primary"
                  size="small"
                  @click="showEditUserForm(row)"
                  class="edit-button"
                >
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  :loading="deleteLoading[row.username]"
                  @click="deleteUser(row)"
                  class="delete-button"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="PAGE_SIZES"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑用户表单对话框 -->
    <el-dialog
      v-model="showUserForm"
      :title="isEditing ? '编辑用户' : '添加用户'"
      width="500px"
      destroy-on-close
      center
      class="user-form-dialog"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="getFormRules(isEditing)"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item v-if="!isEditing" label="密码" prop="passward">
          <el-input
            v-model="userForm.passward"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
          <el-select v-model="userForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="option in roleList"
              :key="option.id"
              :label="option.displayName"
              :value="option.id.toString()"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="cancel-button" @click="showUserForm = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="submitUserForm"
            :loading="submitLoading"
            class="submit-button"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.user-management-container {
  padding: 40px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

    h1 {
      font-size: 32px;
      font-weight: 600;
      color: #333;
      margin: 0;
      background: linear-gradient(135deg, #333 0%, #555 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.5px;
    }

    .add-button {
      height: fit-content;
      border-radius: 14px;
      padding: 16px 32px;
      font-size: 17px;
      transition: all 0.4s;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;

      .button-icon {
        width: auto;
        height: auto;
        margin-right: 10px;
        font-size: 20px;
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
        opacity: 0.95;
      }

      &:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }
  }

  .search-bar {
    margin-bottom: 36px;
    max-width: 550px;

    .search-input {
      :deep(.el-input__wrapper) {
        border-radius: 14px 0 0 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 6px 18px;
      }

      :deep(.el-input__inner) {
        height: 50px;
        font-size: 16px;
        color: #333;

        &::placeholder {
          color: #909399;
          font-size: 15px;
        }
      }

      :deep(.el-input__prefix) {
        font-size: 18px;
        color: #667eea;
      }

      :deep(.el-input__suffix) {
        color: #667eea;
      }

      :deep(.el-input-group__append) {
        padding: 0;
        border-radius: 0 14px 14px 0;
        overflow: hidden;
      }

      .search-button {
        height: 50px;
        border: none;
        padding: 0 28px;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transition: all 0.3s;
        font-size: 16px;

        .el-icon {
          margin-right: 8px;
          font-size: 18px;
        }

        &:hover {
          opacity: 0.95;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
          transform: translateY(-3px);
        }
      }
    }
  }

  .table-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    background: white;
    padding: 16px;
    margin-bottom: 40px;

    &:hover {
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
      transform: translateY(-3px);
    }

    .table-wrapper {
      margin-bottom: 28px;
      overflow-x: auto;
    }

    .user-table {
      :deep(.el-table__header) {
        background-color: #f5f7fa;
      }

      :deep(.el-table__header-wrapper th) {
        padding: 20px 0;
        font-size: 16px;
        font-weight: 600;
      }

      :deep(.el-table__row) {
        transition: all 0.2s;

        td {
          padding: 20px 0;
          height: 68px;
          font-size: 16px;
        }

        &:hover {
          background-color: #f0f7ff;
        }
      }

      .operation-buttons {
        display: inline-flex;
        gap: 8px;
        justify-content: flex-end;
        padding-right: 8px;

        .el-button {
          padding: 8px 16px;
          height: 32px;
          font-size: 14px;
          border-radius: 6px;
          transition: all 0.3s ease;
          margin: 0;

          .el-icon {
            margin-right: 4px;
            font-size: 14px;
          }

          &.edit-button {
            background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
            border: none;
            color: #ffffff;
            min-width: 72px;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 16px rgba(115, 103, 240, 0.3);
            }
          }

          &.delete-button {
            background: #ffffff;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            min-width: 72px;

            &:hover {
              background: #ff4d4f;
              color: #ffffff;
              transform: translateY(-2px);
              box-shadow: 0 4px 16px rgba(255, 77, 79, 0.3);
            }
          }
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    padding: 0 16px 16px 0;

    :deep(.el-pagination) {
      font-size: 14px;

      .el-pagination__sizes,
      .el-pagination__jump {
        margin-left: 20px;
      }

      button {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
      }

      .el-pager li {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        transition: all 0.3s;

        &.is-active {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          font-weight: 600;
        }

        &:hover:not(.is-active) {
          color: #667eea;
        }
      }
    }
  }

  .user-form-dialog {
    :deep(.el-dialog__body) {
      padding: 36px 48px;
    }

    :deep(.el-dialog__header) {
      padding: 28px;
      margin: 0;
      border-bottom: 1px solid #eee;
      text-align: center;
      font-weight: 600;
      font-size: 18px;
    }

    :deep(.el-dialog__footer) {
      border-top: 1px solid #eee;
      padding: 24px 28px;
    }

    :deep(.el-form-item) {
      margin-bottom: 28px;
    }

    :deep(.el-form-item__label) {
      font-weight: 500;
      padding-bottom: 10px;
      font-size: 16px;
    }

    :deep(.el-input__wrapper, .el-select__wrapper) {
      padding: 4px 16px;
    }

    :deep(.el-input__inner) {
      height: 46px;
      font-size: 16px;
    }
  }
}

.error-message {
  margin-bottom: 28px;
}

.dialog-footer {
  padding-top: 24px;
  text-align: right;

  .el-button {
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s;

    & + .el-button {
      margin-left: 20px;
    }

    &.cancel-button {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #606266;

      &:hover {
        color: #333;
        background-color: #e9ecf2;
        border-color: #d8dce6;
        transform: translateY(-2px);
      }
    }

    &.submit-button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25);
        opacity: 0.95;
      }

      &:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }
  }
}

:deep(.el-table) {
  border-radius: 16px;
  overflow: hidden;

  th.el-table__cell {
    background-color: #f5f7fa;
  }

  .el-button {
    transition: all 0.3s;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
  }
}

// 状态更新的视觉效果
:deep(.el-table) {
  .status-changed {
    animation: highlight-row 1.2s ease-in-out;
  }
}

@keyframes highlight-row {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: var(--el-color-success-light-8);
  }
  100% {
    background-color: transparent;
  }
}

// 状态切换对话框样式
:deep(.status-change-dialog) {
  .el-message-box__message {
    font-size: 16px;
    padding: 14px 0;
  }

  .el-message-box__status {
    font-size: 26px;
  }
}

// 状态切换开关样式优化
:deep(.el-switch) {
  height: 24px;

  .el-switch__core {
    width: 48px !important;
    height: 24px;
    border-radius: 12px;
  }

  .el-switch__core .el-switch__action {
    width: 20px;
    height: 20px;
  }

  &.is-checked .el-switch__core {
    background-color: var(--el-color-success);
    border-color: var(--el-color-success);
  }

  &:not(.is-checked) .el-switch__core {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
  }

  .el-switch__label {
    color: var(--el-text-color-regular);
  }
}

// 消息提示样式优化
:deep(.el-message) {
  min-width: 340px;
  padding: 14px 24px;
  border-radius: 10px;

  &.el-message--success {
    background-color: var(--el-color-success-light-9);
    border-color: var(--el-color-success-light-5);
  }

  &.el-message--error {
    background-color: var(--el-color-danger-light-9);
    border-color: var(--el-color-danger-light-5);
  }

  .el-message__content {
    font-size: 16px;
    line-height: 1.5;
  }

  .el-message__icon {
    font-size: 20px;
    margin-right: 12px;
  }
}
</style>
